<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <search-panel @search="search" @insert="handleDataInsert" :showAddButton="false" :selectPer="authConfig.query">
        <el-date-picker
          v-model="form.createTimeList"
          type="datetimerange"
          start-placeholder="操作开始日期"
          end-placeholder="操作结束日期"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <job-shop v-model="form.storeId" placeholder="所属门店" />
        <el-select clearable v-model="form.userId" placeholder="操作人">
          <el-option
            v-for="item in dict.users"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-select clearable v-model="form.menuName" placeholder="操作功能模块">
          <el-option
            v-for="item in dict.module"
            :key="item.label"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </search-panel>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #action="{ row }">
            <i
              class="el-icon-delete"
              title="删除"
              v-permission="authConfig.del"
              style="color: red; margin-left: 15px; cursor: pointer"
              @click="handleDataDelete(row)"
            ></i>
          </template>
      </data-table>
    </template>
  </base-layout>
</template>

<script>
  import { dataList, deleteData } from '@/api/after-sale/systemManage/log'
  import { userPage } from '@/api/after-sale/personnel/index'
  import baseMixin from '@/mixins/base'
  import { parseTimeToYMDHMS } from '@/utils'
  export default {
    mixins: [
      baseMixin({
        findData: dataList,
        deleteData: deleteData,
        dataName: ['content', 'totalRecords'],
        isAdd: false,
        idName: 'id'
      })
    ],
    data() {
      return {
        authConfig: {
          query: 'base:operationLog:page',
          del: 'base:operationLog:deleted',
        },
        dialogVisible: false,
        isAdd: false,
        tableColumnAttributes: [
          // text data select input input  有maxlength属性  如果是select 传入action 函数，则下拉数据改变后会回调这个方法
          // date 宽度为 210  日期为text时宽度为 150
          { name: '所属门店', value: 'storeName', type: 'text' },
          { name: '操作类型', value: 'operationType', type: 'text' },
          { name: '操作模块', value: 'menuName', type: 'text' },
          { name: '操作人', value: 'userName', type: 'text' },
          { name: '操作内容', value: 'params', type: 'text' },
          { name: '操作时间', value: 'createTime', type: 'text' }
        ],
        dict: {
          module: []
        },
        form: {
          createTimeList: [],
          menuName: ''
        }
      }
    },
    async created() {
      const { roles } = this.$store.state.user;
      this.dict.module = roles.map(e => {
        return {label: e.name, value: e.name}
      })
      const { data } = await userPage({},1000, 1);
      if (data.content){
        this.dict.users = data.content.map(e =>{
          return {label: e.userName, value: e.id}
        })
      }      
    },
    methods: {
      search() {
        this.searchOptions = {
          menuName: this.form.menuName,
          storeId: this.form.storeId,
          userId: this.form.userId,
        };
        if (this.form.createTimeList.length > 0) {
          this.searchOptions.minTime = parseTimeToYMDHMS(this.form.createTimeList[0])
          this.searchOptions.maxTime = parseTimeToYMDHMS(this.form.createTimeList[1])
        }
        this.currentPage = 1
        this.setTableData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
